<template>
  <div>
    <!--卡片顶部菜单-->
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
        <el-tab-pane label="未结账" name="1"></el-tab-pane>
        <el-tab-pane label="用餐中" name="2"></el-tab-pane>
        <el-tab-pane label="点菜中" name="3"></el-tab-pane>
        <el-tab-pane label="空闲桌台" name="4"></el-tab-pane>
      </el-tabs>
    </template>
    <PrePay v-if="activeName==1"></PrePay>
    <Eating v-if="activeName==2"></Eating>
    <Ordering v-if="activeName==3"></Ordering>
    <FreeTable v-if="activeName==4"></FreeTable>
  </div>
</template>
<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";
import Eating from "@/components/Eating";
import FreeTable from "@/components/FreeTable";
import Ordering from "@/components/Ordering";
import PrePay from "@/components/PrePay";

export default {
  components: {
    Eating: Eating,
    FreeTable: FreeTable,
    Ordering:Ordering,
    PrePay:PrePay
  },
  data() {
    return {
      activeName: '2',
      index: '',
      orderInfoVisible: 1,
      orderList: [],
      tableList: [],
      currentPage: 1,
      pageSize: 1,
      total: 0
    }
  },
  methods:{

  },
  mounted() {

  }
}
</script>
<style scoped lang="less">
/deep/ .el-tabs {
.el-tabs__item {
  font-size: 20px !important;
}
}
.in_box-card{
  position: relative;
  overflow: hidden;
}
.out_box-card button {
  width: 100px;
  margin: 20px 0;
  border: 1px solid rgba(30, 144, 255, 0.58);
  color: rgba(30, 144, 255, 0.58);
}

.in_box-card button {
  color: #fff;
  font-size: 20px;
  margin: 6px 0;
  border-radius: 10px;
  background: #545fc5;
  border: #3c4bd2;
  width: 120px
}

.in_box-card div {
  margin: 5px;
}
.header-right-corner {
  width: 80px;
  height: 80px;
  position: absolute;
  background-color: rgb(126, 136, 225);
  bottom: -45px;
  right: -45px;
  transform: rotate(45deg);
  box-shadow: #545fc5 10px 10px 10px 10px;

  .sort {
    position: absolute;
    right: 25px;
    top: 25px;
    transform: rotate(-45deg);
    display: block;
    font-size: 22px;
    color: #ffffff;
    width: 80px;
    text-align: center;
  }
}

</style>